/**
 * 数据对比分析组件
 */
import React from 'react';
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';

interface ComparisonData {
  label: string;
  current: number;
  previous: number;
  unit?: string;
}

interface DataComparisonProps {
  title: string;
  data: ComparisonData[];
}

const DataComparison: React.FC<DataComparisonProps> = ({ title, data }) => {
  const calculateChange = (current: number, previous: number) => {
    if (previous === 0) return { value: 0, percent: 0, isUp: true };
    const change = current - previous;
    const percent = (change / previous) * 100;
    return {
      value: change,
      percent: Math.abs(percent),
      isUp: change >= 0,
    };
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-lg transition-shadow duration-300">
      <div className="mb-6">
        <h3 className="text-lg font-bold text-gray-800 mb-1">{title}</h3>
        <p className="text-xs text-gray-500">数据对比分析</p>
      </div>

      <div className="space-y-4">
        {data.map((item, index) => {
          const change = calculateChange(item.current, item.previous);
          const ChangeIcon = change.isUp ? TrendingUp : change.value === 0 ? Minus : TrendingDown;

          return (
            <div
              key={index}
              className="p-4 rounded-xl border border-gray-100 hover:border-blue-200 hover:bg-blue-50/50 transition-all duration-200"
            >
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium text-gray-700">{item.label}</span>
                <div
                  className={`flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-semibold ${
                    change.isUp
                      ? 'bg-green-50 text-green-600 border border-green-200'
                      : change.value === 0
                      ? 'bg-gray-50 text-gray-600 border border-gray-200'
                      : 'bg-red-50 text-red-600 border border-red-200'
                  }`}
                >
                  <ChangeIcon size={12} />
                  <span>
                    {change.value > 0 ? '+' : ''}
                    {change.value.toLocaleString()} {item.unit || ''} ({change.percent.toFixed(1)}%)
                  </span>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="text-xs text-gray-500 mb-1">当前值</div>
                  <div className="text-lg font-bold text-gray-900">
                    {item.current.toLocaleString()} {item.unit || ''}
                  </div>
                </div>
                <div>
                  <div className="text-xs text-gray-500 mb-1">对比值</div>
                  <div className="text-lg font-bold text-gray-600">
                    {item.previous.toLocaleString()} {item.unit || ''}
                  </div>
                </div>
              </div>

              {/* 进度条对比 */}
              <div className="mt-3 space-y-2">
                <div className="flex items-center justify-between text-xs text-gray-500">
                  <span>当前</span>
                  <span>对比</span>
                </div>
                <div className="relative h-2 bg-gray-100 rounded-full overflow-hidden">
                  <div
                    className="absolute top-0 left-0 h-full bg-blue-500 rounded-full transition-all duration-500"
                    style={{
                      width: `${Math.min((item.current / (item.current + item.previous)) * 100, 100)}%`,
                    }}
                  />
                  <div
                    className="absolute top-0 right-0 h-full bg-gray-300 rounded-full transition-all duration-500"
                    style={{
                      width: `${Math.min((item.previous / (item.current + item.previous)) * 100, 100)}%`,
                    }}
                  />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default DataComparison;

